import type {FC } from 'react';
import { useRef } from 'react';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import html2canvas from 'html2canvas';
import {PageContainer} from '@ant-design/pro-components';
import {Link} from '@umijs/max';
import {Avatar, Card, Col, List, Row, Skeleton, Statistic, Image} from 'antd';
import XR from '../images/xr.png';
import Hand from '../images/hand.png';
import Warning1 from '../images/warning1.png';
import Warning2 from '../images/warning2.png';
import mockData from './mock.json';
import styles from './index.less'

dayjs.extend(relativeTime);
const PageHeaderContent = ({currentUser = {}}: any) => {
    const loading = currentUser && Object.keys(currentUser)?.length || false;
    if (!loading) {
        return (
            <Skeleton
                avatar
                paragraph={{
                    rows: 1,
                }}
                active
            />
        );
    }
    return (
        <div className={styles.pageHeaderContent}>
            <div className={styles.avatar}>
                <Avatar size="large" src={currentUser.avatar}/>
            </div>
            <div className={styles.content}>
                <div className={styles.contentTitle}>
                    您好，
                    {currentUser.name}
                    ，祝你开心每一天！
                </div>
                <div>
                    {currentUser.title} |{currentUser.group}
                </div>
            </div>
        </div>
    );
};
const ExtraContent: FC<Record<string, any>> = () => {
    // const {styles} = useStyles();
    return (
        <div className={styles.extraContent}>
            <div className={styles.statItem}>
                <Statistic title="平台数" value={6}/>
            </div>
            <div className={styles.statItem}>
                <Statistic title="文件数" value={12} suffix="/ 24"/>
            </div>
            <div className={styles.statItem}>
                <Statistic title="更新次数" value={156}/>
            </div>
        </div>
    );
};
const Workplace: FC = () => {
    const {loading: projectLoading = false, data: projectNotice = []} = {};
    const {loading: activitiesLoading = false, data: activities = []} = {};
    const componentRef:any = useRef<any>(null);
    const componentRef2:any = useRef<any>(null);
    const componentRef3:any = useRef<any>(null);

    const takeScreenshot = (componentRef: any, index: number) => {
        const element: any = componentRef.current;
        html2canvas(element).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            const link = document.createElement('a');
            link.href = imgData;
            link.download = `警示${index}.png`;
            link.click();
        });
    };
    const renderActivities = (item: any) => {
        const events = item.template.split(/@\{([^{}]*)\}/gi).map((key: any) => {
            if (item[key]) {
                const value = item[key as 'user'];
                return (
                    <a href={value?.link} key={value?.name}>
                        {value.name}
                    </a>
                );
            }
            return key;
        });
        return (
            <List.Item key={item.id}>
                <List.Item.Meta
                    avatar={<Avatar src={item.user.avatar}/>}
                    title={
                        <span>
              <a className={styles.username}>{item.user.name}</a>
                            &nbsp;
                            <span className={styles.event}>{events}</span>
            </span>
                    }
                    description={
                        <span className={styles.datetime} title={item.updatedAt}>
              {dayjs(item.updatedAt).fromNow()}
            </span>
                    }
                />
            </List.Item>
        );
    };

    return (
        <PageContainer
            header={{
                title: '',
            }}
            content={
                <PageHeaderContent
                    currentUser={{
                        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
                        name: '彭于晏',
                        userid: '00000001',
                        email: 'antdesign@alipay.com',
                        signature: '海纳百川，有容乃大',
                        title: '首席专家',
                        group: ' 金冠电气－某某某事业群－某某平台部－某某技术部－CTO',
                    }}
                />
            }
            extraContent={<ExtraContent/>}
        >
            <Row gutter={24}>
                <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                    <Card
                        className={styles.projectList}
                        style={{
                            marginBottom: 24,
                        }}
                        title="对接平台"
                        bordered={false}
                        loading={projectLoading}
                        bodyStyle={{
                            padding: 0,
                        }}
                    >
                        {mockData?.items.map((item: any) => (
                            <Card.Grid className={styles.projectGrid} key={item.id}>
                                <Card
                                    bodyStyle={{
                                        padding: 0,
                                    }}
                                    bordered={false}
                                >
                                    <Card.Meta
                                        title={
                                            <div className={styles.cardTitle}>
                                                <Avatar size="small" src={item.logo + '1111'}/>
                                                <Link className={styles.Titlelink} to={item.href || '/'}>{item.title}</Link>
                                            </div>
                                        }
                                        description={item.description}
                                    />
                                </Card>
                            </Card.Grid>
                        ))}
                    </Card>
                    <Card
                        bodyStyle={{
                            padding: 0,
                        }}
                        bordered={false}
                        className={styles.activeCard}
                        title="升级动态"
                        loading={activitiesLoading}
                    >
                        <List
                            loading={activitiesLoading}
                            renderItem={(item) => renderActivities(item)}
                            dataSource={mockData.dynamic}
                            className={styles.activitiesList}
                            size="large"
                        />
                    </Card>
                </Col>
            </Row>
            <div>
                {/*<div id={styles.card1} ref={componentRef}>*/}
                {/*    <div className={styles.title1}>*/}
                {/*        TOSHIBA*/}
                {/*    </div>*/}
                {/*    <div className={styles.title2}>*/}
                {/*        <div>X-RAY</div>*/}
                {/*        <div>RADIATION</div>*/}
                {/*        <div>AREA</div>*/}
                {/*    </div>*/}
                {/*    <div className={styles.imgWrap}>*/}
                {/*        <img className={styles.srImg} src={XR} />*/}
                {/*    </div>*/}
                {/*    <div className={styles.bottomTitle1}>*/}
                {/*        This equipment includes a X-ray generator.*/}
                {/*    </div>*/}
                {/*    <div className={styles.bottomTitle2}>*/}
                {/*        X-ray generator generates X-ray when energized*/}
                {/*    </div>*/}
                {/*    <div className={styles.footer}>*/}
                {/*        Rated output <span />*/}
                {/*    </div>*/}
                {/*</div>*/}
                {/*<a href="#" onClick={() => takeScreenshot(componentRef, 1)}>下载</a>*/}
                <div id={styles.card2} ref={componentRef2}>
                    <div className={styles.commonWrap}>
                        <div className={styles.left}>
                            <img src={XR} alt=""/>
                            <div className={styles.num}>0ZBE058P001</div>
                        </div>
                        <div className={styles.right}>
                            <div className={styles.headerH}>
                                <img src={Warning2} alt=""/>
                                <div>DANGER</div>
                            </div>
                            <div className={styles.contentH}>
                                <div>
                                    X-RAY GENERATOR IS INCLUDED.
                                </div>
                                <div>
                                    X-RAY MAY CAUSE SERIOUS DISEASE.
                                </div>
                                <div>
                                    PLEASE READ MANUAL CAREFULLY.
                                </div>
                            </div>
                            <div className={styles.headerH}>
                                <img src={Warning2} alt=""/>
                                <div>危险</div>
                            </div>
                            <div className={styles.contentH}>
                                <div>
                                    此处有X射线发生器。
                                </div>
                                <div>
                                    被X射线照射会造成致命疾病。
                                </div>
                                <div>
                                    请遵守使用上的注意事项。
                                </div>
                            </div>
                            <div className={styles.headerH}>
                                <img src={Warning2} alt=""/>
                                <div>危险</div>
                            </div>
                            <div className={styles.contentH}>
                                <div>
                                    ここにはX線発生装置があります。
                                </div>
                                <div>
                                    {/*X線にさらされると致命的な病気を引き起こす可能性があります。*/}
                                    X線 を浴びると致命 的 な病気 になります。
                                </div>
                                <div>
                                    使用上の注意を守ってください。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#" onClick={() => takeScreenshot(componentRef2, 2)}>下载</a>
                <div id={styles.card3} ref={componentRef3}>
                    <div className={styles.commonWrap}>
                        <div className={styles.left}>
                            <img src={Hand} alt=""/>
                            <div className={styles.num}>0ZBE058P001</div>
                        </div>
                        <div className={styles.right}>
                            <div className={styles.headerH}>
                                <img src={Warning1} alt=""/>
                                <div>CAUTION</div>
                            </div>
                            <div className={styles.contentH}>
                                <div>
                                    YOU MAY BE CAUGHT IN THE DOOR AND
                                </div>
                                <div>
                                    INJURED CLOSE THE DOOR SLOWLY TO AVOID RIS
                                </div>
                                <div>
                                    OF YOUR FINGER OR HAND GETTING CAUGHT.
                                </div>
                            </div>
                            <div className={styles.headerH}>
                                <img src={Warning1} alt=""/>
                                <div>注意</div>
                            </div>
                            <div className={styles.contentH}>
                                <div>
                                    有被夹伤的危险。
                                </div>
                                <div>
                                    打开门时请缓慢操作。
                                </div>
                                <div>
                                    并注意您的手与手指,避免被夹伤。
                                </div>
                            </div>
                            <div className={styles.headerH}>
                                <img src={Warning1} alt=""/>
                                <div>注意</div>
                            </div>
                            <div className={styles.contentH}>
                                <div>
                                    挟まれる危険があります。ドアを開
                                </div>
                                <div>
                                    けるときはゆっくり操作してください,手や指
                                </div>
                                <div>
                                    に注意して、挟まれないようにしてください。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#" onClick={() => takeScreenshot(componentRef3, 3)}>下载</a>
            </div>
        </PageContainer>
    );
};
// @ts-ignore
export default Workplace;
